<template id="share">
    <div class="s_f share_m">
    <v-head></v-head>
        <!--<v-banner></v-banner>-->
        <div id="share_1">
        <img class="fruits_img" alt="" src='../image/share_f.png' id="share_one">
        <div class="share_con">
            <!--新版分享礼-->
            <div v-for="(item, index) in items" style="min-height:5.5rem;">
            <div class="share_mm">
                <img src="../image/share_kuang.png" alt="">
                <span>{{item.goods_name}}</span>
            </div>
                    <!--新版分享礼1-->
            <div class="share_mm_1">
                <p>邀请好友</p>
                <p>{{item.goods_brief}}</p>
                <p>好友与你各得一个</p>
                <p>参考价¥<time>{{item.money}}</time></p>
                <img src="../image/go_share.png" alt="" @click="share(item.goods_id)">
                <img :src="item.thumb" alt="">
            </div>

           <!-- <div class="share_c"  v-for="(item, index) in items">
                <div class="img_c">
                    <img  class='k_u' src="../image/kuang.png" alt="">
                    <h2>GIFE:{{item.goods_name}}</h2>
                </div>
                <div class="share_rou">
					<img :src="item.thumb">
                    &lt;!&ndash;  <div class="bai"></div>&ndash;&gt;
                    <div class="height_share">
                        <h3>{{item.goods_brief}}</h3>
                        <p>{{item.notes}}</p>
                        <p>
						参考价：￥{{item.money}}						
						</p>
                        <img  class='img_share' src="../image/go_share.png" @click="share(item.goods_id)" alt="">
                    </div>
                </div>
              
               <p class="goods_id" v-show='false'>{{item.goods_id}}</p>
            </div>-->
			     
             <p id="goods_id" v-show='false'>{{goods_id}}</p>
            </div>
        </div>
        </div>
      <v-footer></v-footer>

        <!--进入分享的弹窗-->
        <div class="back_mm"></div>
        <img src="../image/share_s.png" alt="" class="share_1">
        <img src="../image/share_x.png" alt="" class="share_2">
    </div>

</template>

<script>
    import head from './head.vue';
    import footer from './footer.vue';
    import Vue from 'vue'
    import VueLazyload from 'vue-lazyload'  //引入这个懒加载插件
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '/src/image/1392662591495_1140x0.gif',  //图像的src加载失败
        loading: '/src/image/1392662591495_1140x0.gif', //src的图像加载
        attempt: 1,
        listenEvents: [ 'scroll', 'mousewheel' ]
    });
    export default {
        name:'share',
        data(){
            return{
                items:[],
                img:[],
                share_info:[],
                type:'activity',
                time:this.$route.query.time,
                goods_id:0,
            }
        },
       components:{
          'v-head':head,
          'v-footer':footer,
        },
        mounted:function(){
            
            //写入地址
            if('pushState' in history){
                var stateObject = {};
                var title = "";
                var newUrl = location.href.split('#')[0];
                history.pushState(stateObject,title,newUrl);
            }

            //获取活动信息
            this.share_gift();

        },
		methods: {

            share_gift(){
                let ary = [];
                ary['c']        = 'Share';
                ary['m']        = 'share_gift';
                ary['back_url'] = location.href.toString();
                ary['type']     = 'activity';

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(ary);
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.items      = temp.data.item;
                        this.goods_id   = temp.data.item[0].goods_id;

                        let info = temp.data.share;
                        if(init.isWeiXin()){
                            var arr    = [];
                            arr['url'] = encodeURI(location.href.split('#')[0]);

                            share.share_init(arr);
                            share.share_wx(info);
                        }else{
                            share.share_web(info);
                        }

                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })
            },
            share(id){
                let is_wx = init.isWeiXin();

                $("#goods_id").html(id);
                if(is_wx){
                   alert("请从右上角点击分享");
                   return; 
                }else{
                   //页面分享
                    if(!init.getCookie('uid') && !init.getCookie('time') && !init.getCookie('token')){
                         alert("请登录分享");
                    }else{
                         $("#share_web").click();
                    }
                  
                }
            },
		  }
       
    }
		
    
</script>
<style>
    .back_mm{
        position: fixed;
        height:100%;
        width:100%;
        background:#000000;
        opacity:0.5;
        left:0;
        top:0;
        z-index:2;
    }
   /* 背景展示*/
    .share_1{
        position:fixed;
        top: 23%;
        left: 9%;
        display:block;
        height:5.22rem;
        width:5.22rem;
        z-index:2;

    }
    .share_2{
        z-index:2;
        position:fixed;
        display:block;
        height:0.8rem;
        width:0.8rem;
        top: 17%;
        left: 82%;
    }
    /*分享弹窗*/
    .share_mm_1 img:nth-of-type(2){
        display:block;
        width:2.68rem;
        height:2.62rem;
        position:absolute;
        right:0.5rem;
        top:0.3rem;
    }
    .share_mm_1 img:nth-of-type(1){
        display:block;
        width:1.68rem;
        height:0.41rem;
        position:absolute;
        left:0.8rem;
    }
    .share_mm_1 p:nth-of-type(4) time{
        font-weight:700;
    }
    .share_mm_1 p:nth-of-type(4){
        height:0.4rem;
        line-height:0.4rem;
        color:#ffffff;
        font-size:0.2rem;
        text-indent: 0.87rem;
    }
    .share_mm_1 p:nth-of-type(3){
        height:0.4rem;
        line-height:0.4rem;
        color:#ffffff;
        font-size:0.2rem;
        text-indent: 0.87rem;
        text-decoration: underline;
    }
    .share_mm_1 p:nth-of-type(2){
        height:0.38rem;
        line-height:0.38rem;
        color:#ffffff;
        font-size:0.22rem;
        text-indent: 0.64rem;
    }
    .share_mm_1 p:nth-of-type(1){
        height:0.6rem;
        line-height:0.6rem;
        font-size:0.42rem;
        color:#ffffff;
        text-indent: 0.87rem;
    }
    .share_mm_1{
        position:relative;
        min-width:6rem;
        height:2.74rem;
        padding-top:0.5rem;
        background:url(../image/share_bac.png) no-repeat;
        background-size: contain;:
        -webkit-background-size: contain;
    }
    /*新版分享礼新写的样式*/
    .share_mm span{
        position:absolute;
        display:block;
        height:1.17rem;
        width:5.46rem;
        top:0;
        left:0;
        color:#ffffff;
        font-size:0.4rem;
        font-weight:700;
        line-height:1.17rem;
        text-align:center;
    }
    .share_mm img{
        width:5.46rem;
        display:block;
        min-height:1.17rem;
    }
    .share_mm{
        position:relative;
        min-height:1.17rem;
        width:5.46rem;
        margin:0 0.5rem 0.2rem 0.5rem;
    }
    /*新版分享礼*/
   .share_m .hide{
      display: none;
    }
    #share_1{
        overflow-y: scroll;
    }
   .fruits_img{
      display:block;
      height:5.01rem;
      width:100%;
  }
    .share_m .share_con{
        padding-top: 10px;
        min-height:5.5rem;
        width:100%;
        margin-top:-0.2rem;
       /* background:url(../image/bg.png) repeat;*/
      background: -webkit-linear-gradient(top, #b476ff 0, #ad57ff 50%);
      background: -o-linear-gradient(bottom, #b476ff 0, #ad57ff 50%);
      background: -moz-linear-gradient(top,  #b476ff 0, #ad57ff 50%);
      background: linear-gradient(to bottom, #b476ff 0, #ad57ff 50%);
        background-size:cover;
    }
</style>